/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html,
button,
input,
select,
textarea { color: #222; }
html { font-size: 1em; line-height: 1.4; overflow-y: scroll; }
body { font-family: 'Microsoft YaHei'; font-size: 14px; color: #666;background:#fff; }
/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: rgb(179, 212, 252); text-shadow: none; }
/*
 * A better looking default horizontal rule
 */
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

audio,
canvas,
img,
video { vertical-align: middle; }
a, a:link { color: #666; }
a:hover { color: #f35a06; }
/*
 * Remove default fieldset styles.
 */
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }
/*
 * Image replacement
 */
.ir { background-color: transparent; border: 0; overflow: hidden; /* IE 6/7 fallback */ *text-indent: -9999px; }
.ir:before { content: ""; display: block; width: 0; height: 150%; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before,
.clearfix:after,
.row:before,
.row:after { content: " "; /* 1 */ display: table; /* 2 */ }
.clearfix:after, .row:after { clear: both; }
.clearfix, .row { *zoom: 1; }

/* ==========================================================================
   here is main style
   ========================================================================== */
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-12 {float:left; }
.txt { line-height:1.8;}
.head { text-align: center; height: 90px; line-height: 90px;}
.container,.slider {}
.img,.img img { width:100%;}
.hand{width:500px; height:637px;  position:absolute;top:43px; left:0px;  -webkit-animation:myhand 3s;-moz-animation:myhand 5s;}
@-webkit-keyframes myhand
{
from {top:643px; left:230px;-webkit-transform:rotate(70deg); opacity:1;}
to {top:43px; left:0px;-webkit-transform:rotate(0deg); opacity:1;}
}
@-moz-keyframes myhand
{
from {top:643px; left:230px;-moz-transform:rotate(70deg); opacity:1;}
to {top:43px; left:0px;-moz-transform:rotate(0deg); opacity:1;}
}
.down-btn { width:542px;height:548px;background:url(../../images/bygj/down-btn-background.png) no-repeat;position:absolute;right:0px;top:40px; z-index:10; 
-webkit-animation:mypanel 3s; 
-moz-animation:mypanel 3s
;}
@-webkit-keyframes mypanel
{
from {right:0px;top:80px; opacity:0;}
to {right:0px;top:40px; opacity:1;}
}
@-moz-keyframes mypanel
{
from {right:0px;top:80px; opacity:0;}
to {right:0px;top:40px; opacity:1;}
}
.middle {width: 790px;
height: 670px;
padding-top: 40px;
position: absolute;

}
.inner { width:1160px;position:relative;margin-left:auto;margin-right:auto; overflow:hidden; height:675px; }
.inner2{width: 1150px;
position: relative;
margin-left: auto;
margin-right: auto;
}
.slider { background: url(../../images/bygj/slider-img.jpg) no-repeat center;
height: 675px;
margin: 0 auto;background-color: #dce0e3;}
.down-btn .weixin { display:block;margin:10px auto 28px  auto; }
.col-md-5 { width:50%;*width:49.946%;}

.btn { display:block;}
.down-btn-title{width:420px; height:180px; background-image:url(../../images/bygj/down-btn-title.png); margin:20px auto 0px auto; }
.down-btn-box { padding:0 60px;}
.down-btn-box .btn { width:194px;height:56px;text-indent:-100%;overflow:hidden;cursor:pointer;}
.down-next .btn { background:url(../../images/bygj/down-next.png) no-repeat center -56px;}
.down-now .btn { background:url(../../images/bygj/down-now.png) no-repeat center -56px;}
.btn:hover { background-position:center 0;}

.down-btn-box .col-md-5 .txt { margin:10px 0 0 10px;}



.content{background-color: #008de7;margin: 0 auto;}
.column { height:721px;}
.column .inner { position:relative;padding-top:1px;}
.column.recommend { background:#008de7;color:#fff;}
.column.online { background:#26e67c;color:#0b7627;}
.column.view {background: url(../../images/bygj/bg_view.jpg) center;width: 1150px;
color: #fff;
margin: 0 auto;
background-repeat: no-repeat;}
.column.brand { background:#ff8a8a;color:#b14545;}

.column .inner .imgs { position:absolute;}

hr.horz, hr.vertcl {border:none; position:absolute;}
hr.horz {width:290px; height:2px;background:url(../../images/bygj/line-horz.png) no-repeat center bottom;}
hr.vertcl {width:2px;height:150px; background:url(../../images/bygj/line-vertcl.png) no-repeat right center;}

.column .text-info { width:190px;padding-top:120px;margin-top:130px;position:relative;}
.column .text-info h3 { font-size:40px;font-weight:700;margin:20px 0;}
.column .text-info p { line-height:2;font-size:16px;}

.column.recommend  .text-info { background:url(../../images/bygj/recommend-icon.png) no-repeat 28px top;}
.column.online .text-info { background:url(../../images/bygj/online-icon.png) no-repeat 28px top;}
.column.view .text-info { background:url(../../images/bygj/view-icon.png) no-repeat 28px top;}
.column.brand .text-info { background:url(../../images/bygj/brand-icon.png) no-repeat 28px top;}

.column.recommend .text-info, .column.view .text-info { margin-left:130px;}
.column.online .text-info, .column.brand .text-info { margin-left:770px;}

.column.recommend .text-info hr.horz { width:200px; left:188px;top:146px;}
.column.recommend .text-info hr.vertcl { left:93px;top:-140px;height:110px;}
.column.recommend .imgs { top:80px;right:-104px;}

.column.online .text-info hr.horz { width:290px; left:-300px;top:146px;}
.column.online .text-info hr.vertcl { left:93px;top:-86px;height:60px;}
.column.online .imgs { top:80px;left:0;}

.column.view .text-info hr.horz { width:290px; left:200px;top:146px;}
.column.view .text-info hr.vertcl { left:93px;top:-186px;height:160px;}
.column.view .imgs { top:38px;right:0px;}

.column.brand .text-info hr.horz { width:290px; left:-300px;top:146px;}
.column.brand .text-info hr.vertcl { left:93px;top:-136px;height:110px;}
.column.brand .imgs { top:80px;left:0;}

.foot {text-align: center;
padding-top: 50px;
padding-bottom: 50px;
background: #dce0e3;}
.foot .copyright { margin-top:50px;line-height:2.2;}
.icon{width:104px;height:104px;background:url(../../images/bygj/icons.png)}

.middle li{float: left;
width: 386px;
height: 330px;
}
.middle h3{font-size: 30px;font-family: 'Microsoft YaHei';
line-height: 40px;
margin-top: 180px;
/* margin-left: 100px; */
text-align: center;}
.middle h4{font-size: 16px;
line-height: 30px;
margin-top: 10px;
font-weight:500;
/* margin-left: 100px; */
text-align: center;}
.block{width: 386px;
height: 330px;border:solid 1px #000}
.fl{float:left}
.fr{float:right}
.clear{zoom:1}
